<template>
  <el-main class="bg table_wrap messge">
     <!-- 头部检索 -->
	 <div class='div-form'>
      <el-form
        ref="elFormRef"
        :model="formInline"
        label-width="90px"
        :style="{ width: '100%' }"
        label-position="left"
      >
        <el-row :gutter="20">
          <el-col :span="5">
            <el-form-item label="标题">
              <el-input v-model="formInline.title"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="昵称">
              <el-input v-model="formInline.nickname"></el-input>
            </el-form-item>
          </el-col>
    
        </el-row>
      </el-form>
    </div>
    <baseTable  :tableColumns="columns"  :requestApi='url_get_list' 
	 :isShowSelect="true" 
   :vm="vm" 
	  v-model:isRefresh="isRefresh" 
	  :otherParams="formInline"
	 @handleSelectionChange="handleSelectionChange"
	 @handleCurrentChangeNew="handleCurrentChangeNew"
	 >
     <!-- 头部按钮 -->
	    <template #baseHeadFunt>
            <el-button type="primary" @click="onSubmit">查询</el-button>
            <el-button @click="onReset(true)">重置</el-button>
            <el-button type="danger" v-if="user_group == '管理员' || $check_action('/messge/table','del')" class="search_btn_del"  @click="delInfo()">删除</el-button>
		  </template>
    <!-- 操作 -->
      <template #baseTableFunt="{ scope }">
		    <el-button type="primary"  v-if="user_group == '管理员' && scope.row['reply_state']==0" size="small" @click="router.push('./view?' + field + '=' + scope.row[field])">详情</el-button>
		    <el-button type="primary" @click="reply(scope.row)" v-if="user_group == '管理员'&& scope.row['reply_state']==0" size="small" >回复</el-button>
        <el-button type="primary" @click="show_reply(scope.row)"  size="small" v-if="scope.row['reply_state']==1">查看回复</el-button>
      </template>
      <template #baseTableFunt2="{ scope }">
		    <el-button type="primary"  v-if="user_group == '管理员' && scope['reply_state']==0" size="small" @click="router.push('./view?' + field + '=' + scope[field])">详情</el-button>
		    <el-button type="primary" @click="reply(scope)" v-if="user_group == '管理员'&& scope['reply_state']==0" size="small" >回复</el-button>
        <el-button type="primary" @click="show_reply(scope)"  size="small" v-if="scope['reply_state']==1">查看回复</el-button>
      </template>
      <!-- 特殊表格内容 -->
		<template #tableContent="{ scope, column }">
        <span v-if="column.prop === 'avatar'">
          <el-image
          :preview-teleported="true"
          style="width: 60px; height: 60px"
          :src="$fullUrl($banseUrl,scope.row.avatar)"
          :preview-src-list="[$fullUrl($banseUrl,scope.row.avatar)]"
          :initial-index="0"
          fit="cover"
          >
		   </el-image>
		   </span> 
        <span v-if="column.prop === 'create_time'">{{ formatDate(scope.row.create_time) }}</span> 
        <span v-if="column.prop === 'update_time'">{{ formatDate(scope.row.update_time) }}</span> 
      </template>
      <template #tableContent2="{ scope, column }">
        <!-- <span v-if="column.prop === 'avatar'">
          <el-image
          :preview-teleported="true"
          style="width: 60px; height: 60px"
          :src="$fullUrl($banseUrl,scope.row.avatar)"
          :preview-src-list="[$fullUrl($banseUrl,scope.avatar)]"
          :initial-index="0"
          fit="cover"
          >
		   </el-image>
		   </span>  -->
        <span v-if="column.prop === 'create_time'">{{ column.label }}：{{ formatDate(scope.create_time) }}</span> 
        <span v-if="column.prop === 'update_time'">{{ column.label }}：{{ formatDate(scope.update_time) }}</span> 
      </template>
    </baseTable>
    
    <el-dialog title="回复"  v-model="showModal">
      <form_editor
      v-if="is_check"
                        class="editor el_form_editor_warp"
                        :form="form"
                        @blur_comment="blur_comment"
                        @update_comment="update_comment"
                        :publish_flag='false'
                      />
      <div v-else v-html="form.reply"></div>
      <template   #footer >
        <div class="dialog-footer">
        <el-button @click="showModal = false">取 消</el-button>
        <el-button type="primary" v-if="canReply" @click="submit_reply">确 定</el-button>
      </div>
      </template >
    </el-dialog>
    </el-main>
</template>
<script setup>
import { useRouter} from "vue-router";
let router = useRouter();
import {
  $get_auth,
  func,
  paramsFun,
  $fullUrl,
  formatDate,
  $banseUrl,
  $check_action,
} from "@/utils/utils.js";
import { $post, $get } from "@/api/Api.js";
import {Picture} from "@element-plus/icons-vue";
import { ElMessage} from "element-plus";
import { ref,toRefs,computed,onMounted} from "vue"
import storageHelper from '@/libs/StorageHelper'
let table=ref("message")
let	field=ref("message_id")
let	url_get_list=ref("/api/message/get_list")
let	url_del=ref( "/api/message/del?")
let user_group = storageHelper.getUserInfo().user_group;
// 数据
let	list=ref([])
// 获取用户信息
let	list_user=ref([])
        //回复
let showModal=ref( false)
let form=ref({
    message_id: 0,
    reply: null,
    reply_state: 0
  })
let  canReply=ref(false)
let  is_check=ref(true)
let vm=ref({
	img: "avatar",
	id: "message_id",
	title: "title",
  
  })
// 列名
const columns =[
{ "prop": "title", "label": "标题" },
{ "prop": "nickname", "label": "昵称" },
{ "prop": "avatar", "label": "头像" },
{ "prop": "content", "label": "内容" },
{ "prop": "create_time", "label": "创建时间" },
{ "prop": "update_time", "label": "更新时间" },
]
// 刷新table
let isRefresh = ref(false)
//批量勾选数据
let selectList = ref([])
//点击当前行数据
let currentRowTableProduct = ref({})
//表格勾选回调
let handleSelectionChange = (val) => {
  selectList.value = val.map((item) => {
    return item.message_id
  })
}
//点击当前行
let handleCurrentChangeNew = (val) => {
  currentRowTableProduct.value = val
}
// 批量删除删除
let delInfo = () => {
  ElMessageBox.confirm(
    '此操作将永久删除该文件, 是否继续?',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      selectList.value.map((item) => {
        delFun(item)
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消操作',
      })
    })
}
 
// 调用删除方法
let delFun= (id) => {
  $get(url_del.value+"message_id="+id).then((json)=> {
    if (json.result) {
      ElMessage.success('删除成功');
    } else if (json.error) {
      ElMessage.error(json.error.message);
    }
    isRefresh.value = true
  });

}
// 回复
let show_reply = (val) => {
       form.value.reply = val.reply;
       canReply.value = false;
       is_check.value = false;
       showModal.value = true
}
// 查看回复
let reply = (val) => {
  form.value.message_id = val.message_id;
      form.value.reply = "";
       canReply.value = true;
       is_check.value = true;
       showModal.value = true
}
//  提交回复
let submit_reply=()=>{
  form.value.reply_state = 1;
  $post("/api/message/set?message_id="+form.value.message_id, form.value).then((json, status)=> {
    if (json.result) {
      ElMessage.success('回复成功');
    } else if (json.error) {
      ElMessage.error(json.error.message);
    }
    showModal.value = false
    isRefresh.value = true
  });
}
// 获取列表前
let get_list_before=()=>{
  if (!user_group || user_group === "游客"){
    url_get_list.value = "/api/message/get_list?like=0&user_id=0";
  }
  if(user_group !== "管理员"){
    formInline.value['user_id'] = storageHelper.getUserInfo().user_id;
  }
}
// 获取用户列表
let	 get_list_user=async() =>{
  let json = await $get("/api/user/get_list");
  if(json.result){
    list_user.value = json.result.list;
  }
  else if(json.error){
    console.error(json.error);
  }
}
let table_class=({row, column, rowIndex, columnIndex})=>{
  return "table_class";
}
// 头部搜索// 搜索
let formInline = ref({
	title: '',
  nickname: '',
})
// 搜索
let onSubmit = () => {
  isRefresh.value = true
}
// 重置
let onReset = (refresh) => {
  formInline.value = {
    title: '',
    nickname: '',
  }
  isRefresh.value = refresh
}
 // 富文本编辑器更新
 let update_comment=(obj) => {
  form.value.reply=obj
};
let blur_comment=(obj) => {
  form.value.reply=obj
};
onMounted(()=>{
  get_list_user()
  get_list_before()
})
</script>
<style lang="less" scoped>
.div-form{
padding:10px;
}
</style>